<template>
  <div class="swiper-container mySwiper1" id="floor1Swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="swiper_slide in list" :key="swiper_slide.id">
        <img :src="swiper_slide.imgUrl" />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script>
import Swiper from '../../assets/js/swiper.min.js'
export default {
  props: {
    list: Array,
  },
  data() {
    return {}
  },
  mounted() {
    this._Myinit()
  },
  methods: {
    _Myinit() {
      var swiper = new Swiper('.mySwiper1', {
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        loop: true,
        pagination: {
          el: '.swiper-pagination',
        },
      })
    },
  },
  watch: {
    list: {
      handler() {
        this.$nextTick(() => {
          this._Myinit()
        })
      },
      immediate: true,
    },
  },
}
</script>

<style lang="less" scoped>
.mySwiper1 {
  width: 100%;
  height: 100%;
  --swiper-theme-color: #ff6600;
  --swiper-pagination-color: #00ff33; /* 两种都可以 */
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>